<template>
  <div v-if="user">
    <van-cell title="昵称" is-link to="/user/edit" :value="user?.username"
              @click="toEdit('username', '昵称', user.username)"/>
    <van-cell title="账号" is-link to="/user/edit" :value="user?.userAccount"
              @click="toEdit('userAccount', '账号', user.userAccount)"/>

    <van-cell title="头像" class="avatar-cell">
      <avatar-upload 
        v-model:avatarUrl="user.avatarUrl" 
        @update:avatarUrl="handleAvatarUpdated" />
    </van-cell>
    
    <van-cell title="性别" is-link to="/user/edit" :value="user.gender !== undefined && user.gender !== null ?
    (user.gender === 1 ? '男' : '女') : '未填写'" @click="toEdit('gender', '性别（0 女 1 男）', user.gender)"/>
    <van-cell title="电话" is-link to="/user/edit" :value="user.phone ? user.phone : '未填写'"
              @click="toEdit('phone', '电话', user.phone)"/>
    <van-cell title="邮箱" is-link to="/user/edit" :value="user?.email ? user.email : '未填写'"
              @click="toEdit('email', '邮箱', user.email)"/>
    <van-cell title="标签" is-link to="/user/edit" :value="user?.tags ? '' : '未填写'"
              @click="toEditTags()">
      <template #right-icon v-if="user.tags && user.tags.length > 0">
        <van-tag
            plain
            color="#ffe1e1"
            text-color="#ad0000"
            style="margin: 5px;"
            v-for="tag in parseTags(user.tags)">
          {{ tag }}
        </van-tag>
      </template>
    </van-cell>
    <van-cell title="个人介绍" is-link to="/user/edit" :value="user?.profile ? user.profile : '未填写'"
              @click="toEdit('profile', '个人介绍', user.profile)"/>
    <van-cell title="位置信息" is-link @click="showLocationPicker">
      <template #value>
        <span v-if="user?.longitude && user?.dimension">
          {{ user.longitude.toFixed(6) }}, {{ user.dimension.toFixed(6) }}
        </span>
        <span v-else>未设置</span>
      </template>
    </van-cell>
    <van-cell title="注册时间" :value="user.createTime"/>
  </div>

  <!-- 位置选择弹窗 -->
  <van-popup v-model:show="showLocationPickerPopup" position="bottom" :style="{ height: '100%' }">
    <location-picker
      :initial-lng="user?.longitude"
      :initial-lat="user?.dimension"
      @update="handleLocationUpdate"
      @cancel="showLocationPickerPopup = false"
    />
  </van-popup>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted, ref, onActivated } from "vue";
import { showToast } from "vant";
import myAxios from "../../plugins/myAxios";
import AvatarUpload from "../../components/AvatarUpload.vue";
import LocationPicker from "../../components/LocationPicker.vue";
import { updateCurrentUser } from "../../services/user.ts";

const user = ref();
const showLocationPickerPopup = ref(false);

// 解析标签字符串为数组
const parseTags = (tagsStr) => {
  if (!tagsStr) return [];
  try {
    return JSON.parse(tagsStr);
  } catch (e) {
    console.error('解析标签失败', e);
    return [];
  }
};

// 强制从服务器获取最新用户数据
const fetchUserData = async () => {
  try {
    // 使用直接调用API的方式，绕过任何可能的缓存
    const timestamp = new Date().getTime();
    const res = await myAxios.get(`/user/current?_nocache=${timestamp}`);
    console.log('[用户更新页] 获取用户信息响应:', res);
    
    if (res?.code === 0 && res.data) {
      // 清除可能的缓存数据
      localStorage.removeItem('tempUserData');
      
      // 更新当前组件的用户数据
      user.value = res.data;
      
      // 确保标签格式正确
      if (user.value.tags && typeof user.value.tags === 'string') {
        try {
          // 测试标签是否可以被解析
          JSON.parse(user.value.tags);
        } catch (e) {
          console.error('[用户更新页] 标签解析失败，重置为空数组', e);
          user.value.tags = '[]';
        }
      }
      
      // 强制更新所有存储位置的用户信息
      updateCurrentUser(user.value);
      
      console.log('[用户更新页] 用户信息已完全更新:', user.value);
    } else {
      showToast('获取用户信息失败');
      console.error('[用户更新页] 获取用户失败:', res);
    }
  } catch (error) {
    console.error('[用户更新页] 获取用户信息错误:', error);
    showToast('获取用户信息出错，请稍后重试');
  }
};

// 在组件挂载时获取数据
onMounted(fetchUserData);

// 在组件被激活时重新获取数据（例如，从编辑页面返回时）
onActivated(fetchUserData);

const router = useRouter();

const toEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      editKey,
      editName,
      currentValue
    }
  });
};

// 处理头像更新
const handleAvatarUpdated = async (newAvatarUrl: string) => {
  if (!user.value) return;
  
  // 检查头像URL是否与当前相同，避免重复更新
  if (user.value.avatarUrl === newAvatarUrl) {
    console.log('[用户更新页] 头像URL未变化，跳过更新');
    return;
  }
  
  try {
    console.log('[用户更新页] 开始更新用户头像信息...', newAvatarUrl);
    const updateRes = await myAxios.post('/user/update', {
      id: user.value.id,
      avatarUrl: newAvatarUrl,
    });
    
    if (updateRes?.code === 0) {
      // 更新本地头像URL
      console.log('[用户更新页] 头像更新成功，从', user.value.avatarUrl, '更新为', newAvatarUrl);
      user.value.avatarUrl = newAvatarUrl;
      
      // 更新全局用户状态，确保其他页面也能看到新头像
      updateCurrentUser(user.value);
      
      showToast('头像更新成功');
      
      // 强制重新获取用户数据
      await fetchUserData();
    } else {
      showToast(updateRes?.message || '头像更新失败');
    }
  } catch (error) {
    console.error('[用户更新页] 更新头像错误', error);
    showToast('头像更新失败，请稍后重试');
  }
};

const toEditTags = () => {
  if (!user.value) return;
  
  let currentValue = [];
  // 检查标签是否存在且为有效的JSON字符串
  if (user.value.tags) {
    try {
      // 解析标签
      currentValue = JSON.parse(user.value.tags);
    } catch (error) {
      console.error('[用户更新页] 解析标签失败', error);
      // 如果解析失败，使用空数组
      currentValue = [];
    }
  }
  
  router.push({
    path: '/user/edit',
    query: {
      editKey: 'tags',
      editName: '标签',
      currentValue: JSON.stringify(currentValue)
    }
  });
};

// 显示位置选择器
const showLocationPicker = () => {
  showLocationPickerPopup.value = true;
};

// 处理位置更新
const handleLocationUpdate = async (lng: number, lat: number) => {
  if (!user.value) return;
  
  try {
    console.log('[用户更新页] 更新位置信息:', lng, lat);
    const updateRes = await myAxios.post('/user/update', {
      id: user.value.id,
      longitude: lng,
      dimension: lat
    });
    
    if (updateRes?.code === 0) {
      // 更新本地位置信息
      user.value.longitude = lng;
      user.value.dimension = lat;
      
      // 更新全局用户状态
      updateCurrentUser(user.value);
      
      showToast('位置更新成功');
      
      showLocationPickerPopup.value = false;
      
      // 强制重新获取用户数据
      await fetchUserData();
    } else {
      showToast(updateRes?.message || '位置更新失败');
    }
  } catch (error) {
    console.error('[用户更新页] 更新位置错误', error);
    showToast('位置更新失败，请稍后重试');
  }
};
</script>

<style scoped>
.user-edit-wrapper {
  padding: 20px;
}

.avatar-cell {
  padding: 10px;
  min-height: 120px; /* 确保有足够的空间显示头像 */
  display: flex;
  align-items: center;
}

/* 更新深度选择器语法，兼容Vue 3 */
.avatar-cell :deep(.van-cell__title) {
  flex: 0 0 auto; /* 确保标题不会被内容挤压 */
  min-width: 90px;
  margin-right: 10px;
}

.avatar-cell :deep(.van-cell__value) {
  flex: 1; /* 让内容占据剩余空间 */
  text-align: right; /* 内容靠右对齐 */
  padding-right: 20px; /* 增加右侧内边距 */
}
</style>
     